Menjelaskan Cara Menggunakan Foundation dalam Penerapan CSS Framework

1 Memahami CSS Framework

Menulis css dalam mendesain website merupakan pekerjaan yang sangat merepotkan. Karena hal tersebut, maka biasanya para desainer website tidak menuliskan css dari awal setiap membuat desain website, tapi menggunakan kembali sebagian kode css yang pernah dibuatnya. Bahkan kadang ada kode css yang selalu dipakai berulang-ulang setiap membuat desain website. Kode css yang dipakai berulang-ulang ini yang disebut dengan framework.

Dari uraian di atas dapat disimpulkan, Css framework merupakan kumpulan skrip css yang siap pakai dalam membuat desain website sehingga pekerjaan mendesain website menjadi lebih cepat. Di internet telah banyak sekali bahkan sampai ribuan css framework yang dibagikan secara gratis dan dapat digunakan skrip css digunakan dengan bebas. Cara penggunaan setiap css framework pada umumnya sama yaitu dengan memanggil file css yang telah didownload, kemudian menambahkan nama-nama class yang telah didesain sedemikian rupa pada file css tersebut pada elemen html yang diinginkan.

Dari sekian banyak css Framework yang ada di internet ada beberapa css framework yang cukup populer diantaranya Bootstrap, Foundation, Gumb, skeleton dan beberapa css framework lain.

2 Apa Itu Foundation?

Foundation merupakan salah satu dari ribuan framework CSS di internet digunakan untuk mendesain website dengan lebih cepat dan lebih baik. Foundation dibuat oleh tim ZURB, sehingga sering disebut sebagai Zurb Foundation.

Foundation memiliki dukungan yang relatif lengkap untuk HTML 5 dan CSS 3 dan Juga kompatibel dengan semua browser utama seperti Mozilla Firefox, Google Chrome, Internet Explorer, Safari dan Opera. Sejak versi 2.0 Foundation telah mendukung desain website yang responsive, sehingga website yang desain menggunakan Foundation yang dapat tampil dengan baik pada berbagai device dengan ukuran layar yang berbeda seperti komputer, laptop, tablet, dan handphone.

Salah satu alasan yang membuat Foundation menjadi populer adalah karena fitur yang disediakan yang cukup lengkap. Hampir semua yang dibutuhkan untuk membuat desain website telah disediakan oleh Foundation. Jadi dapat dimungkinkan kita membuat desain website tanpa menuliskan skrip CSS sedikitpun dengan menggunakan Foundation.

3 Keunggulan Foundation

Foundation dapat dijadikan sebagai salah satu Framework CSS terbaik selain Bootstrap karena memiliki beberapa fitur menarik yang belum dimiliki

Framework CSS yang lain. Beberapa fitur yang hanya dimiliki oleh Foundation tersebut diantaranya sebagai berikut:

Interchange, yaitu plugin javascript untuk membuat konten yang responsive seperti menampilkan gambar yang berbeda pada ukuran device yang berbeda, sehingga kita dapat mengambil gambar dengan ukuran yang lebih kecil pada ukuran layar kecil.

Jovride, yaitu fasilitas untuk memberikan panduan langkah-langkah harus dikerjakan, ataupada beberapa aplikasi disebut wizard.

Off Canvas, yaitu navigasi yang tersembunyi di luar layout dan akan tampil saat diaktifkan atau sebuah link diklik dan akan tersembunyi lagi ketika link diklik untuk kedua kalinya.

Lightbox, yaitu fasilitas untuk menampilkan gambar lebih besar pada galeri foto.

Range slider, yaitu komponen form yang digunakan untuk menghasilkan suatu nilai dengan cara menggeser slider.

Equalizer, yaitu fitur untuk membuat dua komponen atau lebih memiliki tinggi yang sama walaupun isi konten berbeda.

Switch, yaitu komponen form yang dapat menggantikan radio button atau checkbox dengan tampilan yang lebih cantik.

Orientation Detection, yaitu fitur yang memungkinkan untuk membunyikan atau menampilkan elemen berdasarkan orientası layar antara landscape atau portrait.

Touch Detection, yaitu fitur yang dapat mendeteksi layar digunakan termasuk layar sentuh atau bukan sehingga dimungkinkan untuk membunyikan atau menampilkan elemen pada layar sentuh saja atau sebaliknya.

Block Grid, yaitu fitur untuk membagi suatu elemen menjadi beberapa kolom dengan lebar yang sama dengan yang mudah.

4 Download Foundation

Untuk mendownload file foundation dapat melalui website resminya yaitu foundation.zurb.com. Klik tombol bertuliskan Download Foundation 5 untuk membuka halaman download.

Dari halaman download kita dapat memilih salah satu metode download berikut:

Download Everything, yaitu download semua fitur yang Foundation.

Essential, yaitu download versi simpel yang berisi fitur-fitur tertentu saja yang telah dipilih oleh Foundation diantaranya typography, grid, button, reveal, dan interchange.

Custom Download, yaitu download dengan memilih sendiri fitur-fitur yang diinginkan termasuk mengubah warna-warna default foundation.

Install via SCSS, yaitu mendownload versi SCSS Fondation dan menginstallnya di komputer.

5 Struktur Folder Foundation

File Foundation yang telah di-extract berisi 3 folder yaitu folder css, img dan js. Folder CSS berisi 3 buah file CSS yaitu sebagai berikut:

normalize.css, merupakan file CSS yang digunakan untuk memberi style dasar pada elemen HTML5.

foundation.css, merupakan file utama foundation yang harus panggil dalam website yang menggunakan foundation. File ini lebih disarankan penggunaanya untuk development, karena isinya sangat terstruktur dengan baik sehingga mudah diedit jika ingin dikembangkan oleh developer website.

foundation.min.css, merupakan file foundation yang telah disederhanakan sehingga ukuran file-nya menjadi lebih kecil.

Folder js berisi 1 file javascript dan 2 folder. File javascript tersebut yaitu foundation.min.js yang merupakan file utama javascript yang dipakai oleh foundation untuk menangani elemen-elemen yang membutuhkan javascript. Sedangkan 2 folder yang ada adalah folder foundation dan folder vendor.

Folder foundation berisi file-file javascript yang dapat dipanggil secara individual. Semua isi file-file javascript yang ada pada folder tersebut dirangkum dalam file foundation.min.js. Adapun folder vendor berisi file-file javascript dari pihak lain yang ikut mendukung dalam penggunaan foundation seperti file jquery.js, modernizrjs dan sebagainya.

6 Dasar Penggunaan Foundation

Untuk menggunakan foundation, kita cukup menambahkan tag meta dan tag link yang memanggil file CSS foundation seperti pada skrip berikut:

Skrip template dasar.html

<! doctype html>

<html>

<head>

<title> Zurb Foundation </title>

initial-scale=1. 0">

Foundation.min.css">

</head>

<body>

<!- isi website -->

</body>

</html>

Pada skrip di atas, tag meta dengan atribut name viewport" digunakan untuk mengatur lebar tampilan awal browser disesuaikan dengan layar device. Sedangkan tag link digunakan untuk memanggil file foundation.min.css yang berada pada folder css.

karyakancil.com